import React, { Component } from 'react'

import './style.css'

import { 
  BrowserRouter as Router,
  Route,
  Switch,
  NavLink,
  Redirect,
  useRouteMatch,
  useHistory,
  useParams,
  useLocation,
  withRouter
} from 'react-router-dom'

function useQuery() {
  return new URLSearchParams(useLocation().search);
}

@withRouter
class List extends Component {
  render() {
    let id = this.props.match.params.id
    return (
      <>
        <h1>list {id}</h1>
        <Detail></Detail>
      </>
    )
  }
}

const Profile = () => {
  return (
    <div>profile</div>
  )
}

const Search = () => {
  let query = useQuery()
  let {push} = useHistory()

  function handleClick() {
    push({
      pathname: '/home/title',
      state: {
        name: 100
      }
    })
  }

  return (
    <>
      <div>search {query.get('kw')}</div>
      <button onClick={handleClick}>click</button>
    </>
  )
}

const HomeTitle = () => {
  return (
    <h1>title</h1>
  )
}

const HomeContent = () => {
  return (
    <div>content</div>
  )
}

const Home = () => {
  // let { path } = props.match
  let { path } = useRouteMatch()
  let { state } = useLocation()
  // console.log(state)

  return (
    <>
      <Route
        path={`${path}/title`}
      >
        <HomeTitle></HomeTitle>
      </Route>
      <Route
        path={`${path}/content`}
      >
        <HomeContent></HomeContent>
      </Route>
    </>
  )
}

const About = () => {
  let { state } = useLocation()
  console.log(state.name)
  return (
    <div>about</div>
  )
}

const Detail = () => {
  return (
    <div>detail</div>
  )
}

const CustomLink = (props) => {
  let match = useRouteMatch({
    path: props.path
  })
  console.log(match)
  let { push } = useHistory()

  let handleClick = () => {
    push(props.to)
  }

  return (
    <li 
      className={match ? 'active' : ''}
      onClick={handleClick}
    >{props.children}</li>
  )
}

const NoMatch = () => {
  return (
    <div>page 404</div>
  )
}

// const CustomLink = props => {
//   let { push } = useHistory()
//   let { url } = useRouteMatch()
//   let { pathname } = useLocation()

//   // console.log(pathname)
  
//   var myUrl

//   const handleClick = () => {
//     let to
//     if (typeof props.to === 'string') {
//       myUrl = props.to
//       to = {
//         pathname: props.to
//       }
//     } else {
//       myUrl = props.to.pathname
//       to = props.to
//     }
//     push(to)
//   }
  
//   console.log(myUrl, pathname)

//   return (
//     <li 
//       onClick={handleClick}
//       className={myUrl === url ? 'active' : ''}
//     >{props.children}</li>
//   )
// }

class App extends Component {
  render() {
    return (
      <Router>
        <ul>
          {/* <li><NavLink activeClassName="active" to="/home/title">home</NavLink></li>
          <li><NavLink activeClassName="active" to="/list/100">list</NavLink></li>
          <li><NavLink activeClassName="active" to={{pathname: '/about', state: {name: 'yidong'}}}>about</NavLink></li>
          <li><NavLink activeClassName="active" to="/search?kw=abc">search</NavLink></li>
          <li><NavLink activeClassName="active" to="/profile">profile</NavLink></li> */}

          <CustomLink path="/home/title" to="/home/title">home</CustomLink>
          <CustomLink path="/list/:id" to="/list/100">list</CustomLink>
          <CustomLink path="/search" to="/search?kw=abc">search</CustomLink>
          <CustomLink path="/about" to={{pathname: '/about', state: {name: 'yidong'}}}>about</CustomLink>
          <CustomLink path="/profile" to="/profile">profile</CustomLink>

          {/* <Route path="/home/title" children={() => <CustomLink to="/home/title">home</CustomLink>}></Route>
          <Route path="/list/:id" children={() => <CustomLink to="/list/100">list</CustomLink>}></Route>
          <Route path="/search" children={() => <CustomLink to="/search?kw=abc">search</CustomLink>}></Route>
          <Route path="/profile" children={() => <CustomLink to="/profile">profile</CustomLink>}></Route>
          <Route path="/about" children={() => <CustomLink to={{pathname: '/about', state: {name: 'yidong'}}}>about</CustomLink>}></Route> */}

        </ul>
        {/* Switch: 排他性路由 */}
        <Switch>
          {/* 包容性路由 */}
          <Redirect
            from="/"
            exact
            to="/home/title"
          ></Redirect>
          <Route
            path="/list/:id"
            render={() => <List></List>}
          >
          </Route>
          <Route
            path="/about"
          >
            <About></About>
          </Route>
          <Route
            path="/profile"
            children={Profile}
          ></Route>
          <Route
            path="/search"
            children={() => <Search></Search>}
          ></Route>
          <Route
            path="/home"
            component={Home}
          ></Route>
          <Route path="*">
            <NoMatch />
          </Route>
        </Switch>
      </Router>
    );
  }
}

export default App;